<template>
  <div>
    <table border="1" width="50%">
      <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
      </tr>
      <tr v-for="(item, index) in arr" :key="index">
        <td>{{ item.name }}</td>
        <td>{{ item.sex }}</td>
        <td>{{ item.age }}</td>
      </tr>
    </table>
    <paging></paging>
    <button @click="chang">点击</button>
  </div>
</template>

<script>
import bus from "@/js/bus";
export default {
  data() {
    return {
      arr: [
        { name: "张三", sex: "男", age: 15 },
        { name: "李四", sex: "女", age: 22 },
        { name: "王二", sex: "女", age: 64 },
        { name: "麻子", sex: "男", age: 55 },
        { name: "老墨", sex: "男", age: 66 },
        { name: "安欣", sex: "男", age: 11 },
        { name: "瑶妹", sex: "女", age: 45 },
        { name: "安欣", sex: "男", age: 11 },
        { name: "安欣", sex: "男", age: 11 },
        { name: "安欣", sex: "男", age: 11 },
        { name: "麻子", sex: "男", age: 55 },
        { name: "老墨", sex: "男", age: 66 },
        { name: "安欣", sex: "男", age: 11 },
        { name: "瑶妹", sex: "女", age: 45 },
        { name: "安欣", sex: "男", age: 11 },
        { name: "安欣", sex: "男", age: 11 },
        { name: "安欣", sex: "男", age: 11 },
        { name: "麻子", sex: "男", age: 55 },
        { name: "老墨", sex: "男", age: 66 },
        { name: "安欣", sex: "男", age: 11 },
        { name: "瑶妹", sex: "女", age: 45 },
        { name: "安欣", sex: "男", age: 11 },
        { name: "安欣", sex: "男", age: 11 },
        { name: "安欣", sex: "男", age: 11 },
      ],
    };
  },
  mounted() {
    this.chang();
  },
  methods: {
    chang() {
      bus.$emit("index", this.arr);
    },
  },
};
</script>

<style>
</style>